import React from "react";
import { Button, Flex, Form, Input } from "antd";
import { PlusOutlined, SearchOutlined } from "@ant-design/icons";
import { useAppDispatch } from "@/store";

import {
  get_sys_menus_list,
  set_is_show_menus_modal,
  set_menus_search_params,
} from "@/store/slice/sysMenus";

function SysMenusSearch() {
  const [form] = Form.useForm();
  const dispatch = useAppDispatch();
  function searchQuery() {
    const params = {
      name: form.getFieldValue("name"),
    };
    dispatch(set_menus_search_params(params));
    dispatch(get_sys_menus_list(params));
  }

  function handleAddClick() {
    dispatch(
      set_is_show_menus_modal({
        show: true,
        mode: 1,
        title: "新增系统菜单",
        data: {},
      })
    );
  }
  return (
    <>
      <div className="table-header">
        <div className="table-header-left">菜单管理</div>
        <div className="table-header-right">
          <Form form={form} layout="inline">
            <Form.Item name="name">
              <Input placeholder="菜单名称" allowClear />
            </Form.Item>
            <Form.Item>
              <Flex gap="small" wrap>
                <Button
                  onClick={searchQuery}
                  type="primary"
                  icon={<SearchOutlined />}
                >
                  查询
                </Button>
                <Button
                  onClick={handleAddClick}
                  type="primary"
                  icon={<PlusOutlined />}
                >
                  新增
                </Button>
              </Flex>
            </Form.Item>
          </Form>
        </div>
      </div>
    </>
  );
}
export default React.memo(SysMenusSearch);
